<template>
  <div>
      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->

<!--  router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
<el-menu   

router
 default-active="1-1" 
 background-color="#545c64"
  text-color="#fff"
active-text-color="#ffd04b"

class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">



 <el-submenu :index="'/'+firstItem.path"    v-for="(firstItem,i) in menuList" :key="i">
   <!-- 第一层 标题导航 -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{firstItem.authName}}</span>
        </template>
        <!-- 第二层 标题导航 -->
          <el-menu-item  :index="'/'+secondItem.path"  
          class="itemLi"
          v-for="(secondItem,j) in firstItem.children" :key="j"
          >

           <i class="el-icon-menu"></i>
              <span>{{secondItem.authName}}</span>
          </el-menu-item>
 </el-submenu>




  
</el-menu>
  </div>
</template>

<script>

import  {getMenus}  from '../api/index'
export default {
 data() {
      return {
        isCollapse: false,
        menuList:[]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 获取左侧菜单列表
      async  initGetMenus() {
        let {data,meta:{status}}=    await getMenus()
          if(status!=200) return  this.$message.error('请求失败')
              this.menuList=data
      }
    
    },
    created() {
      this.initGetMenus()
    }
  }

</script>

<style scoped lang='less'>

.el-menu {
    box-sizing: border-box;
   
} 
// /deep/  >>>  vue 中的样式穿透   sass 只支持 /deep/ 
// .el-menu  .itemLi {
//  padding-left: 80px;
//   }

 .el-menu .itemLi {
   padding-left: 80px !important;
} 

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }



</style>